<template>
    <div class="header">
        <h1>header组件</h1>
        <!-- router-link组件，用于切换路由 -->
        <router-link to="/home">home</router-link>
        <router-link :to="{path:'/product',query:{id:2,pName:'蛋糕',pPrice:5}}">商品</router-link>
        <button @click="toProPage">商品</button>
        <router-link :to="{path:'/cart',query:{id:1,pName:'火腿肠',pPrice:2}}">购物车</router-link>
        <router-link :to="{name:'s',params:{id:4,type:'羽绒服'} }">折扣专区</router-link>
        <router-link to="/mine">个人中心</router-link>
        <router-link to="/hotnews">热点新闻</router-link>
    </div>
</template>

<script>
    export default {
        name:"Header",
        methods:{
            toProPage(){
                //JS的语法切换路由
                this.$router.push({path:"/product",query:{id:3,pName:'鸡爪',pPrice:8}}).catch(()=>{}) //返回的是promise类型
            }
        }
    }
</script>

<style scoped>
/* style标签的scoped属性，限制样式只对当前组件起作用 */
    .header{
        width: 100%;
        height: 15%;
        background-color: aqua;
    }
    .header>h1{
        font-size: 60px;
        height: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .header>a{
        border: 1px solid rgb(255, 251, 0);
        font-size: 20px;
        text-align: center;
        margin-left: 20px;
    }
</style>